<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>Details</title>
		<link href="resources/css/bootstrap.css" rel='stylesheet' type='text/css' />
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="resources/js/jquery.min.js"></script>
		 <!-- Custom Theme files -->
		<link href="resources/css/style.css" rel='stylesheet' type='text/css' />
   		 <!-- Custom Theme files -->
   		 <!---- start-smoth-scrolling---->
		<script type="text/javascript" src="resources/js/move-top.js"></script>
		<script type="text/javascript" src="resources/js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
		 <!--- start-smoth-scrolling-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		</script>
		<!---webfonts-->
		
		<!---//webfonts-->
		<!---start-top-nav-script-->
		<script>
			$(function() {
				var pull 		= $('#pull');
					menu 		= $('nav ul');
					menuHeight	= menu.height();
				$(pull).on('click', function(e) {
					e.preventDefault();
					menu.slideToggle();
				});
				$(window).resize(function(){
	        		var w = $(window).width();
	        		if(w > 320 && menu.is(':hidden')) {
	        			menu.removeAttr('style');
	        		}
	    		});
			});
		</script>
		<!---//End-top-nav-script-->
	</head>
	<body>
		<!---container-->
		<div class="container">
			<!---top-header-->
			<div class="top-header">
				<div class="logo">
					<a href="index.html"><img src="images/logo.png" title="barndlogo" /></a>
				</div>
				<div class="top-header-info">
					<div class="cart-details">
						<div class="login-rigister">
							<ul class="unstyled-list list-inline">
								<li><a class="login" href="#">Login</a></li>
								<li><a class="rigister" href="#">REGISTER <span> </span></a></li>
								<div class="clearfix"> </div>
							</ul>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<!---//top-header-->
			<!---top-header-nav-->
			<div class="top-header-nav">
			<!---start-top-nav-->
			 <nav class="top-nav main-menu">
					<ul class="top-nav">
						<li><a href="products.html">教材 </a><span> </span></li>
						<li><a href="products.html">文学</a><span> </span></li>
						<li><a href="products.html">科学</a><span> </span></li>
						<div class="clearfix"> </div>
					</ul>
					<a href="#" id="pull"><img src="images/nav-icon.png" title="menu" /></a>
			  </nav>
			  <!---End-top-nav-->
			  <!---top-header-search-box-->
			  <div class="top-header-search-box">
			  	<form>
			  		<input type="text" placeholder="Search" required / maxlength="22">
			  		<input type="submit" value=" " >
			  	</form>
			  </div>
			  <!--top-header-search-box-->
						<div class="clearfix"> </div>
			</div>
		</div>
			<!--//top-header-nav-->
			<!---content-->
				<div class="content">
				<!--图书展示区-->
				<div class="product-details">
					<div class="container">
					<div class="product-details-row1">
						<div class="product-details-row1-head">
							<h2>Men'sFootwear</h2>
							<p>Hookset Handcrafted Fabric Chukka</p>
						</div>
						<!-- 图片信息 -->
						<div class="col-md-4 product-details-row1-col1">
						<!-- Include the Etalage files -->
							<link rel="stylesheet" href="resources/css/etalage.css">
							<script src="resources/js/jquery.etalage.min.js"></script>
						<!-- Include the Etalage files -->
						<script>
								jQuery(document).ready(function($){
					
									$('#etalage').etalage({
										thumb_image_width: 300,
										thumb_image_height: 400,
										source_image_width: 900,
										source_image_height: 1000,
										show_hint: true,
										click_callback: function(image_anchor, instance_id){
											alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
										}
									});
									// This is for the dropdown list example:
									$('.dropdownlist').change(function(){
										etalage_show( $(this).find('option:selected').attr('class') );
									});
							});
						</script>
						<!-- 图片信息 -->
						<div class="details-left">
							<div class="details-left-slider">
								<ul id="etalage">
									<li>
										<a href="optionallink.html">
											<img class="etalage_thumb_image" src="images/product-slide/image1_thumb.jpg" />
											<img class="etalage_source_image" src="images/product-slide/image1_large.jpg" />
										</a>
									</li>
									<li>
										<img class="etalage_thumb_image" src="images/product-slide/image2_thumb.jpg" />
										<img class="etalage_source_image" src="images/product-slide/image2_large.jpg" />
									</li>
									<li>
										<img class="etalage_thumb_image" src="images/product-slide/image3_thumb.jpg" />
										<img class="etalage_source_image" src="images/product-slide/image3_large.jpg" />
									</li>
									<li>
										<img class="etalage_thumb_image" src="images/product-slide/image4_thumb.jpg" />
										<img class="etalage_source_image" src="images/product-slide/image4_large.jpg" />
									</li>
									<li>
										<img class="etalage_thumb_image" src="images/product-slide/image5_thumb.jpg" />
										<img class="etalage_source_image" src="images/product-slide/image5_large.jpg" />
									</li>
									<li>
										<img class="etalage_thumb_image" src="images/product-slide/image6_thumb.jpg" />
										<img class="etalage_source_image" src="images/product-slide/image6_large.jpg" />
									</li>
									<li>
										<img class="etalage_thumb_image" src="images/product-slide/image7_thumb.jpg" />
										<img class="etalage_source_image" src="images/product-slide/image7_large.jpg" />
									</li>
								</ul>
							</div>
						</div>
						<!--图片信息end-->
					</div>
					<!-- 左侧区域end -->
					<!-- 右侧文字展示区 -->
					<div class="col-md-8 product-details-row1-col2">
						<div class="product-price">
							<div class="product-price-left text-right">
								<span>174.00</span>
								<h5>109.00$</h5>
							</div>
							<div class="product-price-right">
								<a href="#"><span> </span></a>
								<label> 节约 <b>40%</b></label>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="product-price-details">
							<!-- <p class="text-right">This is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,e </p> -->
							<ul class="book_info">
								<li class="seller_address">
									<div class="left_name">卖家地址</div>
									<span class="right_value">老二113</span>
								</li>
								<li class="seller_name">
									<div class="left_name">卖家姓名</div>
									<span class="right_value">陈哲奇</span>
								</li>
								<li class="phone_num">
									<div class="left_name">手机</div>
									<span class="right_value">15922221832</span>
								</li>
								<li class="seller_qq">
									<div class="left_name">QQ</div>
									<span class="right_value">412970931</span>
								</li>
								<li class="publish_date">
									<div class="left_name">发布时间</div>
									<span class="right_value">4天前</span>
								</li>
							</ul>
							<div class="product-cart-share">
								<div class="add-cart-btn">
									<input type="button" value="加入收藏" />
							    </div>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<!-- 右侧文字展示end -->
				<!--- 介绍与评价区 -->
				<div class="product-tabs">
					<!-- 图书介绍 -->
					<div class="book_introduction">
						<h3>介绍</h3>
						<p>这里是图书的介绍信息！</p>
					</div>
					<!-- 图书介绍end -->
					<!-- 图书评价 -->
					<div class="book_comment">
						<h3>评价</h3>
						<div class="post_comment">
							<img src="" alt="">
							<div class="comment_log">
								<div class="comment_box">
									<textarea name="" id="" class="comment_input" cols="30" rows="10"></textarea>
								</div>
								<button class="sub_comment" type="button">评论</button>
							</div>
						</div>
						<div class="comment_list">
							
								<div class="comment_d">
									<img src="" alt="">
									<h5>周国庆</h5>
									<p>不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错</p>
								</div>
								<div class="comment_d">
									<img src="" alt="">
									<h5>郭子晨</h5>
									<p>不好不好不好不好不好不好不好不好不好不好不好不好不好不好不好不好不好不好不好不好</p>
								</div>
								<div class="comment_d"><img src="" alt="">
									<h5>赵德鹏</h5>
									<p>还行还行还行还行还行还行还行还行还行还行还行还行还行还行还行还行</p>
								</div>
							
						</div>
					</div>
					<!-- 图书评价end -->
				</div>
				<!-- 介绍与评价end -->
				<!-- //product-details ---->
				</div>
				</div>
			<!----content-->
			<div class="clearfix"> </div>
			<!----footer-->
			<!-- <div class="footer">
				<div class="container">
					<div class="col-md-3 footer-logo">
						<a href="index.html"><img src="images/flogo.png" title="brand-logo" /></a>
					</div>
					<div class="col-md-7 footer-links">
						<ul class="unstyled-list list-inline">
							<li><a href="#"> Faq</a> <span> </span></li>
							<li><a href="#"> Terms and Conditions</a> <span> </span></li>
							<li><a href="#"> Secure Payments</a> <span> </span></li>
							<li><a href="#"> Shipping</a> <span> </span></li>
							<li><a href="contact.html"> Contact</a> </li>
							<div class="clearfix"> </div>
						</ul>
					</div>
					<div class="col-md-2 footer-social">
						<ul class="unstyled-list list-inline">
							<li><a class="pin" href="#"><span> </span></a></li>
							<li><a class="twitter" href="#"><span> </span></a></li>
							<li><a class="facebook" href="#"><span> </span></a></li>
							<div class="clearfix"> </div>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
			 </div>
			 <div class="clearfix"> </div> -->
			<!---//footer-->
			<!---copy-right-->
					<div class="copy-right">
						<div class="container">
							<p>Copyright &copy; 2014.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="Ä£°åÖ®¼Ò">Ä£°åÖ®¼Ò</a></p>
							<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
							<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
						</div>
					</div>
			<!--//copy-right-->
		</div>
		<!--container-->
	
</body>
</html>

